<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css margin</title>

    <style type="text/css">
        #container {
            width: 300px;
            /* top -> right -> bottom -> left*/
            /* CSS中将元素居中的最好的方法是把元素左右外边距属性值设定为auto。
            对于常用的浏览器，这只需要设定width规则，左外边距话和右外边距都为给定的auto值 */

            /*margin-top: 20px;*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            /*margin-bottom: 1em;*/

            margin: 20px auto auto 1em;

            border: 1px solid #000;
            padding: 20px;
            background: #CCC;
        }

        .pClass {
            background-color: lawngreen;
        }

    </style>
</head>
<body>

    <div id="container">
        div
    </div>
    <hr>

    <h1>base</h1>
    <p style="background-color: #337ab7">段落</p>
    <hr>

    <h1>margin: 20px</h1>
    <h1>等价于</h1>
    <h1>margin-top: 20px; margin-left: 20px; margin-right: 20px; margin-left: 20px</h1>
    <p class="pClass" style="margin: 20px">段落1</p>
    <p class="pClass" style="margin-top: 20px; margin-right: 20px; margin-bottom:20px;margin-left: 20px">段落1</p>
    <hr>

    <h1>margin-top: 10px; margin-right: 15px; margin-bottom: 5px;margin-left:0px</h1>
    <h1>等价于</h1>
    <h1>margin: 10px 15px 5px 0px</h1>
    <p class="pClass" style="margin-top: 10px; margin-right: 15px; margin-bottom: 5px;margin-left:0px;">段落2</p>
    <p class="pClass" style="margin: 10px 15px 5px 0px">段落2</p>
    <hr>

    <!-- 百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。 -->
    <h1>margin: 10%</h1>
    <p class="pClass" style="margin: 1%;">段落3</p>
    <hr>


    <!-- 值复制 -->
    <h1>margin: 0.5em 1em 0.5em 1em;</h1>
    <h1>等价于</h1>
    <h1>margin: 0.5em 1em;</h1>
    <p class="pClass" style="margin: 0.5em 1em 0.5em 1em;">段落4</p>
    <p class="pClass" style="margin: 0.5em 1em;">段落4</p>

</body>
</html>